import React from "react";
// import { Map, List, Seq, fromJS, Range } from "immutable";

const index = () => {
  // 创建immutable对象
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // toJS方法可以将imuutable对象转成普通对象
  // 项目中不要用，仅仅是调试的时候用
  // console.log(map1.toJS());

  // 获取对象的属性
  // console.log(map1.get("b"));

  // 修改对象的属性,set方法是用来生成一个新的对象，老的对象会一直存在且不变且可用
  // const map2 = map1.set("a", 5);
  // console.log(map1 === map2); // false
  // console.log(map1.equals(map2)); // false  equals是比较里面的内容是否相同

  // const obj = {
  //   a: 3,
  //   b: 4,
  // };
  // const map1 = Map(obj);
  // const map2 = Map(obj);
  // console.log(map1 === map2); // false
  // console.log(map1.equals(map2)); // true

  // immutable数组的创建
  // const list1 = List([1, 2, 3]);
  // const list2 = list1.push(3, 4, 5);
  // const list3 = list2.unshift(0);
  // const list4 = list1.concat(list2, list3);
  // console.log(list4.toJS());
  // size属性表示数组长度
  // console.log(list4.size);

  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  // });
  // 对象也可以使用map方法做便利
  // const map2 = map1.map((value, key) => {
  //   console.log(value);
  //   return value * value;
  // });
  // console.log(map2);

  // 对象和数组的合并
  // merge方法可以做对象的合并,key相同的会覆盖
  // mergeDeep方法表示深度合并
  // immutable对象是可以合并普通对象的
  // immutable数组也可以合并普通数组
  // const map1 = Map({
  //   a: 3,
  //   b: 4,
  //   z: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // const map2 = Map({
  //   c: 5,
  //   b: 6,
  //   z: {
  //     x: 30,
  //     w: 40,
  //   },
  // });
  // const map3 = map1.merge(map2);
  // const map3 = map1.mergeDeep(map2);
  // const map3 = map1.merge({ name: "zhangsan" });
  // console.log(map3);

  // const list1 = List([1, 2, 3]);
  // const list2 = List([4, 5, 6]);
  // const list3 = list1.concat([4, 5, 6]);
  // console.log([4, 5, 6].concat(list1));

  // Seq方法既可以生成对象，也可以生成数组
  // Seq是有惰性的，用到什么再去计算什么
  // const map1 = Seq({ a: 3, b: 4 });
  // console.log(map1);
  // const list1 = Seq([1, 2, 3]);
  // console.log(list1);
  // const oddSquares = Seq([1, 2, 3, 4, 5, 6, 7, 8])
  //   .filter((x) => {
  //     console.log("filter x:" + x);
  //     return x % 2 !== 0;
  //   })
  //   .map((x) => {
  //     console.log("map x:" + x);
  //     return x * x;
  //   });
  // console.log(oddSquares.get(1));

  // fromJS可以递归的创建嵌套的immutable对象
  // const map1 = fromJS({
  //   a: 1,
  //   b: 2,
  //   c: {
  //     x: 10,
  //     y: 20,
  //   },
  // });
  // console.log(map1);

  // const nested = fromJS({ a: { b: { c: [3, 4, 5] } } });
  // const nested2 = nested.mergeDeep({ a: { b: { d: 6 } } });
  // // console.log(nested2); // { a: { b: { c: [3, 4, 5], d: 6 } } }
  // // getIn方法用于深度地获取immutable对象的值
  // console.log(nested2.getIn(["a", "b", "d"]));
  // const nested3 = nested2.setIn(["a", "b", "d"], 10);
  // console.log(nested3.getIn(["a", "b", "d"]));
  // const nested4 = nested2.updateIn(["a", "b", "d"], (v) => v + 1);
  // console.log(nested4.toJS());

  // const aRange = Range(1, Infinity)
  //   .skip(1000)
  //   .map((n) => -n)
  //   .filter((n) => n % 2 === 0)
  //   .take(2)
  //   .reduce((r, n) => r * n, 1);

  // console.log(aRange);

  return (
    <>
      <h2>immutable</h2>
      <input type="range" />
    </>
  );
};

export default index;
